<!DOCTYPE html>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/login.css'}"/>
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/dialogbutton.js'}" type="text/javascript"></script>
    <title>绑定账号</title>
    <style>
        .am-share-title { background-color: #fff;   color:#2d9cff;;   line-height: 0.9rem;font-size: 0.32rem;text-align: center;font-weight: bolder }
        #select {
            display: none;
            position: absolute;
            top: 45%;
            left: 10%;
            width: 6rem;
            height: 3.0rem;
            padding: 0.2rem;
            border: 0.09rem solid #0caffe;
            background-color: white;
            z-index: 1002;
            /*overflow: auto;*/
        }
        .chaicon{
            float: right;
            display: inline-block;
            width: .4rem;
            height: .4rem;
            top:0.2rem;
            right: 0.3rem;
        }


        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            background-color: white;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=88);
        }

        .sub{
            margin-left: 0.3rem;
            margin-right: 0.3rem;
            line-height: 0.75rem;
            width: 6.3rem;
            border-radius: 0.1rem;
            height: 0.75rem;
            font-size: 0.26rem;
            background: #2d9cff;
            color: #fff;
            margin-top: 0.1rem;
        }

        .sub1{
            font-weight: bolder;
            margin-left: 0.3rem;
            line-height: 0.75rem;
            width: 2.3rem;
            border-radius: 0.1rem;
            height: 0.75rem;
            font-size: 0.26rem;
            background: #2d9cff;
            color: #fff;
            margin-top: 0.7rem;
        }


    </style>
</head>
<body>
    <header><span onclick="javascript:history.go(-1)"></span>绑定账号</header>
    <div class="head"></div>
    <form action="##" id="form1" method="post">
        <ul class="form">
            <input type="hidden" name="openId" th:value="${openid}">
            <li><input type="text" id="name" name="name" onblur="phoneyanzheng()" placeholder="请输入绑定的手机号/用户名/邮箱"/></li>
            <li><input type="password" id="password1" name="password" onblur="pass1()" placeholder="请输入密码"/></li>
            <span  id="phoneSpan"></span>
            <li><input id="sub" class="sub" type="button" value="绑&nbsp;&nbsp;&nbsp;&nbsp;定" onclick="login()"/></li>
            <li><input id="btn" class="sub" type="button" value="没有账号？去注册"/></li>
        </ul>
    </form>
    <!--<ul class="fix miss">
        <li class="l"><a href="recover.html">忘记密码？</a></li>
        <li class="r"><a href="register.html">账号注册</a></li>
    </ul>
    <div id="fifth" class="g6"><span class="mr20"></span>第三方登录<span class="ml20"></span></div>
    <ul class="df jcsb" id="footer">

        <li id="disanfang"><img th:src="@{${session.baseUrl}+'images/login/icon2.png'}" alt=""/><p>微信</p></li>

    </ul>-->
    <div id="fade" class="black_overlay"></div>
    <div  id="select" style="display:none;border-radius: 0.4rem;">
        <a href="javascript:void(0)" style="float: right" onclick="closeDialog()"><i class="chaicon"><img th:src="@{${session.baseUrl}+'images/login/cha.jpg'}" style="width:0.4rem; height:0.4rem;"  ></i></a>
        <h3 class="am-share-title">注册方式</h3>
        <div >
            <a th:href="@{/wap/register1.html/(openid=${openid})}"><button class="sub1" >个人注册</button></a>
            <a th:href="@{/wap/businessregist1.html/(openid=${openid})}"><button class="sub1">企业注册</button></a>
        </div>
    </div>
</body>
<script>
    $("#btn").click(function () {
        document.getElementById("select").style.display="block";
        document.getElementById('fade').style.height= $(window).height()+"px";
        document.getElementById('fade').style.display = 'block'
    })

    //关闭弹窗
    function closeDialog() {
        document.getElementById('select').style.display = 'none';
        document.getElementById('fade').style.display = 'none'
    }

</script>

<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;


    var flag ;
    //手机号码验证
    function phoneyanzheng() {
        var namespan = $("#phoneSpan");
        var phone = $("#name").val();
        var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        var myRegName = /^[A-Za-z][A-Za-z0-9]{5,11}$/;
        if (phone == '') {
            namespan.html('请输入用户名').css('color', '#ff2525');
            flag= false;
        }else if ((/^1[3456789]\d{9}$/.test(phone))) {
            var phone1 = $("#name").val();
            $.ajax({
                url:basePath+'/memberUser/isPhone',
                type: "get",
                dataType: "JSON",
                data: {
                    phone: phone1,
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        namespan.html('手机号未注册').css('color', '#ff2525');
                        flag= false;
                    } else if (data.msg == "no") {
                        namespan.html('');
                        flag= true;
                    }
                },
                error: function () {
                }
            });
        } else if (myReg.test(phone)) {
            var phone1 = $("#name").val();
            $.ajax({
                url:basePath+'/memberUser/isMail',
                type: "get",
                dataType: "JSON",
                data: {
                    mail: phone1,
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        namespan.html('此邮箱未注册').css('color', '#ff2525');
                        flag= false;
                    } else if (data.msg == "no") {
                        namespan.html('');
                        flag= true;
                    }
                },
                error: function () {
                }
            });

        } else if(myRegName.test(phone)){
            var phone1 = $("#name").val();
            $.ajax({
                url:basePath+'/memberUser/isName',
                type: "get",
                dataType: "JSON",
                data: {
                    name: phone1,
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        namespan.html('用户名未注册').css('color', '#ff2525');
                        flag= false;
                    } else if (data.msg == "no") {
                        namespan.html('');
                        flag= true;
                    }
                },
                error: function () {
                }
            });

        }else{
            namespan.html('输入不正确，请重新输入').css('color', '#ff2525');
            flag= false;
        }

    }

    //密码验证
    function pass1() {
        var namespan = $("#phoneSpan");
        var x = document.getElementById("password1").value.length;
        var name = $("#password1").val();
        if (name == '') {
            /*namespan.html('请输入密码').css('color', '#ff2525');*/
            return 3;
        } else if (x <= 7) {
            namespan.html('密码必须大于8位').css('color', '#ff2525');
            return 2;
        } else {
            namespan.html('');
            return 1;
        }phoneyanzheng
    }


    function login() {
        var phone = $("#name").val();
        var name = $("#password1").val();
        if (phone == '') {
            $("#phoneSpan").html('请填写用户名').css('color', '#ff2525');
        }else if(name==''){
            $("#phoneSpan").html('请填写密码').css('color', '#ff2525');
        }
        if(pass1()==1&&flag==true){
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: basePath+'/wap/memberUser/login' ,//url
                data: $('#form1').serialize(),
                success: function (result) {

                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.msg == "success") {
                        $('body').dailog({type: 'success', title: '登录', discription: '登录成功'});
                        self.setInterval(function () {
                            window.location.href=basePath+"/wap/index.html";
                        }, 2000) //这里3000代表3秒
                    }else if(result.msg == "failure"){
                        $('body').dailog({type: 'warning',title: '登录', discription: '用户名或密码错误，请重新登录'});
                        self.setInterval(function () {  // 这个方法是说在延迟3秒后执行大括号里的方法
                            window.location.href=basePath+"/wap/loginInit.do";
                        }, 2000) //这里3000代表3秒
                    }else if(result.msg == 'weiyibangding'){
                        $('body').dailog({type: 'warning',title: '登录', discription: '此微信号已绑定其他账号'});
                        self.setInterval(function () {  // 这个方法是说在延迟3秒后执行大括号里的方法
                            window.location.href=basePath+"/wap/loginInit.do";
                        }, 2000) //这里3000代表3秒
                    }else if(result.msg == 'zhangyibangding'){
                        $('body').dailog({type: 'warning',title: '登录', discription: '此账号已绑定其他微信号,请联系后台人员处理！'});
                        self.setInterval(function () {  // 这个方法是说在延迟3秒后执行大括号里的方法
                            window.location.href=basePath+"/wap/loginInit.do";
                        }, 2000) //这里3000代表3秒
                    };
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    }

</script>
</html>